<template>
    <div class="newsupdata-bx">
        <div class="title">
            <h2>新闻动态</h2>
            <p style="color: #4f7987">
                消防知识，关乎生命安全，预防火灾，保卫家园
            </p>
        </div>
        <div class="container d-flex flex-wrap col-12 justify-content-arround">

            <div class="left col-sm-12 col-md-6 col-lg-6 col-xl-6">

                <div class="newsupdata-content-left">
                    <img src="https://www.wzxfpx.com/wp-content/uploads/2023/05/%E5%AD%A6%E9%99%A2%E5%90%88%E4%BD%9C%E6%B5%B7%E6%8A%A521-scaled.jpg"
                        alt="">
                </div>


            </div>
            <div class="right col-sm-12 col-md-5 col-lg-5 col-xl-5">
                <div class="container d-flex justify-content-arround col-12">
                    <div class="col-xl-4">
                        <div class="newsupdata-content-right-fz">
                            <span class="addborder">学院动态</span>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="newsupdata-content-right-fz">
                            <span class="addborder">行业动态</span>
                        </div>
                    </div>
                    <div class="col-xl-4">
                        <div class="newsupdata-content-right-fz">
                            <span class="addborder">消防知识</span>
                        </div>
                    </div>
                </div>
                <div class="newsupdata-content-right-ctbx">
                    <div class="newsupdata-content-right-ct " v-for="(item, index) in newslist" :key="index">
                        <div class="right-bx container d-flex justify-content-center col-12">
                            <div class="col-xl-10 right-fz1">
                                <h5 class="right-fzchange">{{ item.content }}</h5>
                            </div>
                            <div class="col-xl-2 right-fz2">
                                <span class="right-fzchange">{{ item.time }}</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>


    </div>
</template>

<script setup lang="ts">
let newslist = [
    {
        content: "广东为众消防清明放假通知",
        time: "4月3"
    },
    {
        content: "中国消防协会2024年第1期消防安全管理员职业技能认定督导员、考评员培训圆满开班",
        time: "4月3"
    },
    {
        content: "广东为众消防培训学院2024年4月初中级消防设施操作员培训开班通知",
        time: "3月28"
    },
    {
        content: "广东为众消防学院2024年第4期消防设施操作员(监控)线下实操培训圆满开班",
        time: "3月28"
    },
]
</script>

<style scoped lang="scss">
.newsupdata-bx {
    height: auto;
    min-height: unset;
    background-color: rgb(245, 250, 253);
    background-image: none;
    padding-top: 60px;
    padding-bottom: 90px;

    h2 {
        padding-bottom: 0.625rem;
    }

    .title {
        text-align: center;
        font-weight: 100;
    }

    .newsupdata-content-left {
        padding: 8px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .newsupdata-content-right-fz {
        
        padding: 15px;
        text-align: center;
        color: #03a9f4;
        font-weight: 400;
        font-family: Open Sans;

        @media (max-width: 985px) {
            padding: 10px;
        }
    }

    .addborder:hover {
        border-bottom: 1px solid;
    }

    .newsupdata-content-right-ctbx {
        padding: 8px;
        @media (min-width: 760px) and (max-width: 1064px) {
            flex-wrap: wrap;

        }

        .newsupdata-content-right-ct {
            margin: 15px 0;
            .right-bx {
                padding: 15px;
                text-align: center;
                height: auto;
                min-height: unset;
                background-color: #FFFFFF;
                background-image: none;
                border-top-width: 1px;
                border-top-color: rgb(238, 238, 238);
                border-top-style: solid;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-right-width: 1px;
                border-right-color: rgb(238, 238, 238);
                border-right-style: solid;
                border-bottom-width: 1px;
                border-bottom-color: rgb(238, 238, 238);
                border-bottom-style: solid;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
                border-left-width: 1px;
                border-left-color: rgb(238, 238, 238);
                border-left-style: solid;
                box-shadow: 0px 0px 3px 0px rgba(204, 204, 204, 0.5);

            }

            .right-fz1 {
                text-align: left;
                color: #17252a;
                font-size: 18px;
                padding: 15px;
                margin: 0;
                font-weight: 700;
               
            }
            .right-fzchange:hover{
                    color: #f79007;
                }
            .right-fz2 {
                color: #666666;
                font-size: 14px;
                padding: 15px;
            }
        }
    }
}
</style>